<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <br>
    <br>
    <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="formDiv">
      <el-form-item label="名称:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <el-input v-model="postForm.title" placeholder="请输入名称" class="pad0" />
          </el-col>
        </el-row>
      </el-form-item>

      <!-- <el-form-item label="类型:">
                    <el-row :xs="24" :sm="24" :lg="24">
                      <el-col :xs="24" :sm="8" :lg="8"  class="mtright">
                        <el-select v-model="selectedState" value-key="name" placeholder="类型:" @change="getRemoteCountyList" style="width:100%">
                          <el-option
                            v-for="item in arr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.value"
                          />
                        </el-select>
                      </el-col>
                    </el-row>
                </el-form-item> -->
      <!-- <el-form-item label="视频:"  v-if="tab==2">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="20" :lg="20"  class="mtright">
                  <Upload class="fileUp" v-model="postForm.layoutImage" :urls="postForm.layoutImage" :maxcount=2 title="" format="png,jpg,jpeg" @getImage="changePoster" />
            </el-col>
          </el-row>
        </el-form-item> -->
      <el-form-item v-if="tab==1" label="封面:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Upload v-model="postForm.poster" class="fileUp" :urls="postForm.poster || ''" :maxcount="1" title="" format="png,jpg,jpeg" @getImage="changePoster" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="分享描述:" label-width="110px">
        <el-row :xs="24" :sm="24" :lg="24">

          <el-col :xs="24" :sm="20" :lg="20" class="">
            <!-- <el-input v-model="postForm.projectName" placeholder="请输入分享至微信的描述语" /> -->
            <el-input
              v-model="postForm.subtitle"
              type="textarea"
              class="pad0"
              style="width:102%"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入分享至微信的描述语"
            />
          </el-col>

        </el-row>
      </el-form-item>
      <el-form-item v-if="tab==1" label="详情:" label-width="85px" class="">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Tinymce ref="editor" v-model="postForm.content" :height="400" />
          </el-col>
        </el-row>
      </el-form-item>

    </el-form>
    <div class="text-center btnWidth">
      <el-button class="add" @click="showEditForm(1)">发布</el-button>
      <el-button class="addSave" @click="showEditForm(0)">保存草稿</el-button>
      <el-button class="addNot" @click="close(1)">取消</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Upload from '@/components/Upload/SingleImage'
import Tinymce from '@/components/Tinymce'
import { getNewsById, bannerID } from '@/api/news'
import { add, update, getbannerById } from '@/api/banner'
export default {
  components: {
    Upload,
    Tinymce,
    Breadcrumb
  },
  data() {
    return {
      selectedState: 1,
      activeName: 'first',
      true: false,
      textarea2: '',
      tab: 1,
      arr: [
        { id: 1, name: '图文', value: 1 },
        { id: 2, name: '视频', value: 2 }
      ],
      postForm: {
        poster: ''
      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      id: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    this.postForm = JSON.parse(sessionStorage.getItem('item'))
    if (this.id) {
      bannerID({ id: this.id }).then(response => {
        console.log(response)
        //    this.postForm = response.data
      })
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    close() {
      this.$router.push({ path: '/operation/operater' })
    },
    showEditForm(val) {
      this.postForm.status = val
      this.show = true
      this.save()
    },
    getRemoteCountyList() {
      this.selectedState == 1 ? this.tab = 1 : this.tab = 2
    },
    save() {
      const data = this.postForm
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.id) {
            update(data).then(response => {
              console.log(response)
              if (response.code == 200) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }
            })
          } else {
            add(data).then(response => {
              console.log(response)
              this.postForm.id = response.data.id
              this.id = response.data.id
              if (response.code == 200) {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }
            })
          }
        }
      })
      this.loading = false
    },
    changePoster(val) {
      this.postForm.poster = val.toString()
    },
    changeVideo(val) {
      this.postForm.video = val.toString()
    },
    change() {

    },
    getImage() {

    }
  }
}
</script>

<style lang="scss">
.overview-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__content {
    padding: 17px;
  }
}
</style>

<style lang="scss" scoped>
.mtright{margin-left: 27px;}
.overview-tabs {
  padding: 10px;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}
.fileUp{width: 70px;}
::v-deep .upload-container .el-upload{width: 90px;height: 90px;line-height: 80px;}
.pad0{padding-right: 0;}
  .btnWidth{background: #E5E9ED;padding: 15px 0;}
.btnWidth button{width:107px;height: 41px;}
</style>
